<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'

	function back() {
		uni.navigateBack({ delta: 1 })
	}

	// 选择用户头像
	const avatarToken = ref('')
	const url = ref()
	async function getPicToken() {
		const res = await http.request({
			url: '/api/config/qiUpload',
			method: 'POST',
			data: {},
		})
		console.log(res)
		if (res.st == 1) {
			avatarToken.value = res.data.uptoken
			url.value = res.data.domain
		}
	}

	const avatarUrl = ref()
	function chooseMerchantAvatar() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// sourceType: ['album'], //从相册选择
			success: (ava) => {
				console.log(ava.tempFilePaths)
				//将头像保存到后端
				uni.uploadFile({
					url: 'https://upload-z0.qiniup.com/',
					filePath: ava.tempFilePaths[0], //头像文件
					header: {},
					formData: {
						token: avatarToken.value,
					},
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data)
						avatarUrl.value =
							url.value + JSON.parse(uploadFileRes.data).key
					},
				})
			},
		})
	}

	//选择营业执照
	const licenseCard = ref('')
	function chooseLicenseCard() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// sourceType: ['album'], //从相册选择
			success: (ava) => {
				console.log(ava.tempFilePaths)
				//将头像保存到后端
				uni.uploadFile({
					url: 'https://upload-z0.qiniup.com/',
					filePath: ava.tempFilePaths[0], //头像文件
					header: {},
					formData: {
						token: avatarToken.value,
					},
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data)
						licenseCard.value =
							url.value + JSON.parse(uploadFileRes.data).key
					},
				})
			},
		})
	}

	//选择身份证正面
	const idCardFront = ref('')
	function chooseIDCardFront() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// sourceType: ['album'], //从相册选择
			success: (ava) => {
				console.log(ava.tempFilePaths)
				//将头像保存到后端
				uni.uploadFile({
					url: 'https://upload-z0.qiniup.com/',
					filePath: ava.tempFilePaths[0], //头像文件
					header: {},
					formData: {
						token: avatarToken.value,
					},
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data)
						idCardFront.value =
							url.value + JSON.parse(uploadFileRes.data).key
					},
				})
			},
		})
	}

	//选择身份证反面
	const idCardBack = ref('')
	function chooseIDCardBack() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// sourceType: ['album'], //从相册选择
			success: (ava) => {
				console.log(ava.tempFilePaths)
				//将头像保存到后端
				uni.uploadFile({
					url: 'https://upload-z0.qiniup.com/',
					filePath: ava.tempFilePaths[0], //头像文件
					header: {},
					formData: {
						token: avatarToken.value,
					},
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data)
						idCardBack.value =
							url.value + JSON.parse(uploadFileRes.data).key
					},
				})
			},
		})
	}

	const mobile = ref('')
	const code = ref('')
	const timer = ref('')
	const codeSecond = ref('60')
	const codeShow = ref(true)
	async function getMobileCode() {
		if (!mobile.value) {
			uni.utils.toast('请先填写手机号！')
			return
		}
		if (!codeShow.value) {
			return
		}
		const res = await http.request({
			url: '/api/alisms/sendSms',
			method: 'POST',
			data: {
				mobile: mobile.value,
			},
		})
		if (res.st == 1) {
			codeShow.value = false
			uni.utils.toast('验证码获取成功')
			timer.value = setInterval(() => {
				if (codeSecond.value <= 0) {
					codeShow.value = true
					clearInterval(timer.value)
				}
				codeSecond.value--
			}, 6000)
		} else {
			uni.utils.toast(res.msg)
		}
	}
	const goods_info = ref('')
	const city = ref('')
	const name = ref('')

	// 获取地址树
	const dataTree = ref()

	async function getAddress() {
		const res = await http.request({
			url: '/api/address/getAddress',
			method: 'POST',
			data: {},
		})
		console.log(res)
		dataTree.value = res.data
	}
	const provinceId = ref('')
	const cityId = ref('')
	const areaId = ref('')
	function onchange(e) {
		console.log(e.detail.value[0])
		provinceId.value = e.detail.value[0].value
		cityId.value = e.detail.value[1].value
		areaId.value = e.detail.value[2].value
		city.value = provinceId.value + cityId.value + areaId.value
	}

	// 商家入驻弹框
	const settleinpopup = ref('')
	function merchantPop() {
		if (!name.value) {
			uni.utils.toast('请输入姓名')
			return
		}
		if (!goods_info.value) {
			uni.utils.toast('请输入商品类型')
			return
		}
		if (!avatarUrl.value) {
			uni.utils.toast('请选择头像')
			return
		}
		if (!licenseCard.value) {
			uni.utils.toast('请选择营业执照')
			return
		}
		if (!idCardFront.value) {
			uni.utils.toast('请选择身份证正面')
			return
		}
		if (!idCardBack.value) {
			uni.utils.toast('请选择身份证反面')
			return
		}
		if (!city.value) {
			uni.utils.toast('请选择地址')
			return
		}
		if (!mobile.value) {
			uni.utils.toast('请输入手机号')
			return
		}
		if (!code.value) {
			uni.utils.toast('请输入验证码')
			return
		}
		settleinpopup.value.open('bottom')
	}

	function closeMerchantPop() {
		settleinpopup.value.close('bottom')
		ifread.value = false
	}

	const ifread = ref(false)
	function readRules() {
		ifread.value = true
	}

	async function applayMerchant() {
		const res = await http.request({
			url: '/api/shop/applyPost',
			method: 'POST',
			data: {
				mobile: mobile.value,
				code: code.value,
				goods_info: goods_info.value,
				city: city.value,
				name: name.value,
				card_front: idCardFront.value,
				card_opposite: idCardBack.value,
				license: licenseCard.value,
				shop_img: avatarUrl.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.utils.toast('申请成功,即将跳转结果页')
			settleinpopup.value.close('bottom')
			setTimeout(() => {
				uni.reLaunch({
					url: `/minePage/settlestatus/index`,
				})
			}, 2000)
		} else {
			uni.utils.toast(res.msg)
		}
	}

	onMounted(() => {
		getAddress()
		getPicToken()
	})
</script>

<template>
	<view class="business-content" style="padding-bottom: 20rpx">
		<!-- 头部背景 -->
		<view class="top-bg">
			<image
				class="image"
				src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/top-business.png"
			></image>
			<image
				@click="back"
				class="back"
				src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/back-aim.png"
				mode=""
			></image>
		</view>
		<!-- 三大优势 -->
		<view class="ThreeAdvantage">
			<view class="title">
				<text class="tit-text" style="font-weight: 700"
					>商家入驻三大优势</text
				>
				<view class="line"></view>
			</view>

			<view class="ThreeAdvantage-lable" style="margin-top: 20rpx">
				<view class="intelligent">
					<view class="first">
						<text class="">①</text>
					</view>
					<view class="text-intelligent">
						<view class="first-tit">智能入库</view>
						<view class="first-slogan">便携一键上袋</view>
						<image
							class="first-img"
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/clock.png"
						></image>
					</view>
				</view>

				<view class="intelligent">
					<view class="first">
						<text class="">②</text>
					</view>
					<view class="text-intelligent">
						<view class="first-tit">极速回款</view>
						<view class="first-slogan">售罄隔日到账</view>
						<image
							class="first-img"
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/money.png"
						></image>
					</view>
				</view>

				<view class="intelligent">
					<view class="first">
						<text class="">③</text>
					</view>
					<view class="text-intelligent">
						<view class="first-tit">平台发货</view>
						<view class="first-slogan">免去发货烦恼</view>
						<image
							class="first-img"
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/cart.png"
						>
						</image>
					</view>
				</view>
			</view>
		</view>

		<!-- 入驻流程 -->
		<view class="ThreeAdvantage" style="height: 330rpx">
			<view class="title">
				<text class="tit-text" style="font-weight: 700"
					>商家入驻流程</text
				>
				<view class="line" style="width: 410rpx"></view>
			</view>
			<!-- 第一排 -->
			<view class="process" style="margin-top: 20rpx">
				<view class="" style="display: flex">
					<view class="part01">
						<text class="">①商家入驻</text>
					</view>
					<view class="go-right">
						<image
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/go-right.png"
						></image>
					</view>
				</view>

				<view class="" style="display: flex">
					<view class="part01">
						<text class="">②商家发货</text>
					</view>
					<view class="go-right">
						<image
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/go-right.png"
						></image>
					</view>
				</view>

				<view class="" style="display: flex">
					<view class="part01">
						<text class="">③平台入库</text>
					</view>
				</view>
			</view>
			<!-- 中间 -->
			<view class="go-down">
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/go-down.png"
				></image>
			</view>

			<!-- 第二排 -->
			<view class="process">
				<view class="" style="display: flex">
					<view class="part01">
						<text class="">⑥平台发货</text>
					</view>
					<view class="go-right">
						<image
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/go-right.png"
						></image>
					</view>
				</view>

				<view class="" style="display: flex">
					<view class="part01">
						<text class="">⑤火热销售</text>
					</view>
					<view class="go-right">
						<image
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/go-right.png"
						></image>
					</view>
				</view>

				<view class="" style="display: flex">
					<view class="part01">
						<text class="">④自助上袋</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 计费方式 -->
		<view class="ThreeAdvantage" style="height: 196rpx">
			<view class="title">
				<text class="tit-text" style="font-weight: 700">计费方式</text>
				<view class="line" style="width: 410rpx"></view>
			</view>
			<view class="jifei-text">
				<text class=""
					>首批入驻商家<text class="tipcolor">限时免费</text
					>，商家售卖的所有产品平台不收取任何费用。交易手续费为<text
						class="tipcolor"
						>0.65%</text
					>，由微信、支付宝等支付平台收取，会在商家提现中体现。<text
						class="tipcolor"
						>每周一、三、五为提现日，当日可提现2次.</text
					>
				</text>
			</view>
		</view>

		<!-- 上传资料 -->
		<view class="ThreeAdvantage" style="height: auto; padding-top: 12rpx">
			<view class="tit-name">
				<text class="business-name">商家名称</text>
				<input
					class="name-input"
					type="text"
					maxlength="10"
					placeholder="请输入商家名称"
					v-model="name"
				/>
			</view>

			<view class="tit-name">
				<text class="business-name" style="flex-shrink: 0"
					>商品类型</text
				>
				<textarea
					class="name-input"
					placeholder="请列举主营商品，逗号分隔"
					v-model="goods_info"
				/>
			</view>

			<view class="tit-name">
				<text class="business-name">商家头像</text>
				<image
					:src="avatarUrl"
					style="width: 200rpx; height: 200rpx; margin-left: 120rpx"
					mode=""
					@click="chooseMerchantAvatar"
					v-if="avatarUrl"
				></image>
				<image
					v-else
					src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/add-avatar.png"
					style="width: 200rpx; height: 200rpx; margin-left: 120rpx"
					mode=""
					@click="chooseMerchantAvatar"
				></image>
			</view>

			<view class="nmae-line"></view>

			<view class="realname">
				<text class="realname-tit">上传实名信息</text>
				<text class="realname-slogn"
					>仅用于真实资料审核，平台加密您的资料</text
				>

				<view class="License">
					<view class="License-tit">
						<text class="" style="margin: 30rpx 0rpx 0rpx 45rpx"
							>营业执照</text
						>
						<text
							class=""
							style="
								font-size: 20rpx;
								color: #a6a6a6;
								margin: 10rpx 0rpx 0rpx 44rpx;
							"
							>上传您的营业执照照片</text
						>
					</view>
					<view class="License-img" @click="chooseLicenseCard">
						<image
							class="License-img"
							:src="licenseCard"
							mode=""
							v-if="licenseCard"
						></image>
						<image
							v-else
							class="add"
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/idcard-add.png"
						>
						</image>
					</view>
				</view>

				<view class="License">
					<view class="License-tit">
						<text class="" style="margin: 30rpx 0rpx 0rpx 45rpx"
							>身份证头像面</text
						>
						<text
							class=""
							style="
								font-size: 20rpx;
								color: #a6a6a6;
								margin: 10rpx 0rpx 0rpx 44rpx;
							"
							>上传您的身份证头像面</text
						>
					</view>
					<view
						class="License-img idcard-front"
						@click="chooseIDCardFront"
					>
						<image
							class="License-img idcard-front"
							:src="idCardFront"
							mode=""
							v-if="idCardFront"
						></image>
						<image
							v-else
							class="add"
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/idcard-add.png"
						>
						</image>
					</view>
				</view>

				<view class="License">
					<view class="License-tit">
						<text class="" style="margin: 30rpx 0rpx 0rpx 45rpx"
							>身份证国徽面</text
						>
						<text
							class=""
							style="
								font-size: 20rpx;
								color: #a6a6a6;
								margin: 10rpx 0rpx 0rpx 44rpx;
							"
							>上传您的身份证国徽面</text
						>
					</view>
					<view
						class="License-img idcard-back"
						@click="chooseIDCardBack"
					>
						<image
							class="License-img idcard-front"
							:src="idCardBack"
							mode=""
							v-if="idCardBack"
						></image>
						<image
							v-else
							class="add"
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/idcard-add.png"
						>
						</image>
					</view>
				</view>
			</view>
		</view>

		<!-- 所在地 -->
		<view class="ThreeAdvantage" style="height: 196rpx">
			<view class="title">
				<text class="tit-text" style="font-weight: 700">计费方式</text>
				<view class="line" style="width: 410rpx"></view>
			</view>
			<view class="jifei-text">
				<text class=""
					>首批入驻商家限时免费，商家售卖的所有产品平台不收取任何费用。交易手续费为0.65%，由微信、支付宝等支付平台收取，会在商家提现中体现。每周一、三、五为提现日，当日可提现2次.</text
				>
			</view>
		</view>
		<!-- 验证码申请 -->
		<view class="ThreeAdvantage" style="height: 550rpx">
			<view class="title title-away">
				<text class="tit-text" style="margin-left: 36rpx">所在地</text>
				<view class="name-right" style="margin-left: 126rpx">
					<uni-data-picker
						placeholder="省、市、区"
						popup-title="请选择地址"
						:clear-icon="false"
						:map="{ text: 'name', value: 'name' }"
						:localdata="dataTree"
						v-model="addressInfo"
						@change="onchange"
					>
					</uni-data-picker>
				</view>
			</view>
			<view class="title title-away">
				<text class="tit-text" style="margin-left: 36rpx"
					>手机号码</text
				>

				<input
					class="name-input"
					type="number"
					placeholder="请输入手机号码"
					v-model="mobile"
				/>
			</view>
			<view class="title title-away">
				<text class="tit-text" style="margin-left: 36rpx">验证码</text>
				<input
					class="name-input"
					style="margin-left: 145rpx"
					type="number"
					placeholder="请输入验证码"
					v-model="code"
				/>
				<text class="get-away" @click="getMobileCode">{{
					codeShow ? `获取验证码` : `${codeSecond}秒`
				}}</text>
			</view>
			<!-- <view class="agreement">
				<text class="">已阅读</text>
				<text class="agreement-bule">《商家入驻协议》 </text>
			</view> -->
			<!-- 按钮 -->
			<view class="agreement application-btn" @click="merchantPop">
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/application.png"
					class=""
				></image>
				<!-- <uni-popup ref="popup" type="center" background-color="#ffffff" border-radius="10rpx 10rpx 0 0">阿萨法久啊四季发刷卡机打卡手机打卡的久啊可视对讲爱空间</uni-popup> -->
			</view>

			<view class="verify-tit verify-time">
				<text class="">申请入驻后</text>
				<text class="" style="color: #8453ed">3个工作日</text>
				<text class="">内，卡牌大师客服将与您联系</text>
			</view>
		</view>
		<!-- 详情弹出层 -->
		<uni-popup ref="settleinpopup" type="bottom">
			<view class="settleinpopup-content">
				<view class="settle-close"> </view>
				<view class="settle-title"> 商家入驻协议 </view>

				<scroll-view
					scroll-y="true"
					class="scroll-Y"
					style="height: 64vh"
					@scrolltolower="readRules"
				>
					<view
						class=""
						style="
							padding: 0 42rpx;
							font-size: 28rpx;
							color: rgba(125, 125, 125, 1);
						"
					>
						签约须知:《美团电商合作协议》(以下简称"本协议")是由美团平台的运营方即上海三快好物科技有限公司(以下简称"乙方")与以独立第三方经营者身份入驻美团平台的法律实体(以下简称“甲方"或"商家")达成的关于提供和使用美团平台服务的各项条款，乙方在此特别提醒甲方认真阅读本协议各条款，并请甲方审慎考虑并选择接受或不接受本协议。如果甲方点击同意，或完成注册，或以其他任何方式使用/继续使用本协议项下服务的，即表示甲方已充分阅读、理解并自愿接受本协议，同意受本协议各项条款的约束。一、术语定义甲乙双方确认并同意本条款中对于各名词的解释及定义，并同意按照该定义履行相关义务。1.1平台(以下统称为"平台"):特指由乙方或乙方关联方现在或将来拥有合格权限运营/管理的，提供团购、闪惠、预订和商品展示及销售的代收款等技术服务的网络服务平台，包括但不限于美团网、大众点评网、乙方关联方、乙方合作方运营/管理的网络服务平台，及未来可能新设或合作的网络平台等。1.2用户:即在平台注册，并使用其本人注册的账户，通过平台展示的甲方信息获取商签约须知:《美团电商合作协议》(以下简称"本协议")是由美团平台的运营方即上海三快好物科技有限公司(以下简称"乙方")与以独立第三方经营者身份入驻美团平台的法律实体(以下简称“甲方"或"商家")达成的关于提供和使用美团平台服务的各项条款，乙方在此特别提醒甲方认真阅读本协议各条款，并请甲方审慎考虑并选择接受或不接受本协议。如果甲方点击同意，或完成注册，或以其他任何方式使用/继续使用本协议项下服务的，即表示甲方已充分阅读、理解并自愿接受本协议，同意受本协议各项条款的约束。一、术语定义甲乙双方确认并同意本条款中对于各名词的解释及定义，并同意按照该定义履行相关义务。1.1平台(以下统称为"平台"):特指由乙方或乙方关联方现在或将来拥有合格权限运营/管理的，提供团购、闪惠、预订和商品展示及销售的代收款等技术服务的网络服务平台，包括但不限于美团网、大众点评网、乙方关联方、乙方合作方运营/管理的网络服务平台，及未来可能新设或合作的网络平台等。1.2用户:即在平台注册，并使用其本人注册的账户，通过平台展示的甲方信息获取商签约须知:《美团电商合作协议》(以下简称"本协议")是由美团平台的运营方即上海三快好物科技有限公司(以下简称"乙方")与以独立第三方经营者身份入驻美团平台的法律实体(以下简称“甲方"或"商家")达成的关于提供和使用美团平台服务的各项条款，乙方在此特别提醒甲方认真阅读本协议各条款，并请甲方审慎考虑并选择接受或不接受本协议。如果甲方点击同意，或完成注册，或以其他任何方式使用/继续使用本协议项下服务的，即表示甲方已充分阅读、理解并自愿接受本协议，同意受本协议各项条款的约束。一、术语定义甲乙双方确认并同意本条款中对于各名词的解释及定义，并同意按照该定义履行相关义务。1.1平台(以下统称为"平台"):特指由乙方或乙方关联方现在或将来拥有合格权限运营/管理的，提供团购、闪惠、预订和商品展示及销售的代收款等技术服务的网络服务平台，包括但不限于美团网、大众点评网、乙方关联方、乙方合作方运营/管理的网络服务平台，及未来可能新设或合作的网络平台等。1.2用户:即在平台注册，并使用其本人注册的账户，通过平台展示的甲方信息获取商签约须知:《美团电商合作协议》(以下简称"本协议")是由美团平台的运营方即上海三快好物科技有限公司(以下简称"乙方")与以独立第三方经营者身份入驻美团平台的法律实体(以下简称“甲方"或"商家")达成的关于提供和使用美团平台服务的各项条款，乙方在此特别提醒甲方认真阅读本协议各条款，并请甲方审慎考虑并选择接受或不接受本协议。如果甲方点击同意，或完成注册，或以其他任何方式使用/继续使用本协议项下服务的，即表示甲方已充分阅读、理解并自愿接受本协议，同意受本协议各项条款的约束。一、术语定义甲乙双方确认并同意本条款中对于各名词的解释及定义，并同意按照该定义履行相关义务。1.1平台(以下统称为"平台"):特指由乙方或乙方关联方现在或将来拥有合格权限运营/管理的，提供团购、闪惠、预订和商品展示及销售的代收款等技术服务的网络服务平台，包括但不限于美团网、大众点评网、乙方关联方、乙方合作方运营/管理的网络服务平台，及未来可能新设或合作的网络平台等。1.2用户:即在平台注册，并使用其本人注册的账户，通过平台展示的甲方信息获取商
					</view>
				</scroll-view>
				<view
					class="settle-button allready"
					v-if="ifread"
					@click="applayMerchant"
				>
				</view>
				<view class="settle-button" v-else> </view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.tipcolor {
		color: rgba(121, 72, 234, 1);
	}
	.business-content {
		background: #e9eaf2;
		// height: 100vh;
	}

	.top-bg {
		position: relative;
		width: 100vw;
		height: 266rpx;
		.back {
			position: absolute;
			top: 112rpx;
			left: 28rpx;
			width: 32rpx;
			height: 94rpx;
		}
	}

	.image {
		width: 100%;
		height: 264rpx;
	}

	.ThreeAdvantage {
		width: 740rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin: 12rpx auto;
	}

	.title {
		padding-top: 20rpx;
		display: flex;
		font-size: 32rpx;
		color: #000;
		font-weight: 500;
		line-height: 50rpx;
		text-align: left;
		align-items: center;
	}

	.line {
		width: 340rpx;
		// height: 0.5rpx;
		background: #e0d1ff;
		border: 0.8px solid #e0d1ff;
		border-radius: 2rpx;
		margin: auto;
	}

	.tit-text {
		margin-left: 52rpx;
	}

	.ThreeAdvantage-lable,
	.process {
		display: flex;
	}

	.intelligent {
		display: flex;
		width: 216rpx;
		height: 180rpx;
		background-color: #fff;
		border: 2px solid #e0d1ff;
		border-radius: 14rpx;
		margin: auto;
	}

	.first {
		font-size: 26rpx;
		color: #fff;
		line-height: 32rpx;
		font-weight: 500;
		background: #e0d1ff;
		clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
		width: 68rpx;
		height: 68rpx;
	}

	.text-intelligent {
		margin-top: 12rpx;
		text-align: center;
		line-height: 44rpx;
		padding-right: 20rpx;
		width: 263rpx;
	}

	.first-tit {
		font-size: 30rpx;
		font-weight: 500;
		color: #815bd9;
	}

	.first-slogan {
		font-size: 24rpx;
		font-weight: 400;
		color: #808080;
	}

	.first-img {
		width: 66rpx;
		height: 66rpx;
		margin-top: 5rpx;
	}

	.part01 {
		font-size: 28rpx;
		line-height: 60rpx;
		text-align: center;
		color: #8f67eb;
		font-weight: 500;
		width: 157rpx;
		height: 60rpx;
		border: 4rpx solid rgba(188, 164, 237, 0.31);
		border-radius: 7rpx;
		margin: 0rpx 0rpx 0rpx 38rpx;
	}

	.go-right {
		width: 50rpx;
		height: 70rpx;

		margin-top: 10rpx;
		// margin-left: 20rpx;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}
	}

	.go-down {
		width: 87vw;
		// height: 60rpx;
		text-align: right;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.jifei-text {
		width: 90vw;
		height: 100%;
		font-size: 20rpx;
		color: #808080;
		text-align: left;
		margin: 10rpx auto;
	}

	.business-name {
		font-size: 32prx;
		font-weight: 600;
		color: #000;
	}

	.name-input {
		margin-left: 110rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #a6a6a6;
	}

	.tit-name {
		padding-top: 20rpx;
		margin-left: 20rpx;
		padding-bottom: 50rpx;
		display: flex;
	}

	.nmae-line {
		width: 90vw;
		// height: 0.5rpx;
		background: #f5f5f5;
		border: 0.4px solid #f5f5f5;
		border-radius: 2rpx;
		margin: auto;
	}

	.realname {
		// height: 500rpx;
		padding-bottom: 50rpx;
		display: flex;
		margin-top: 30rpx;
		margin-left: 20rpx;
		flex-direction: column;
	}

	.realname-tit {
		font-weight: 600;
		color: #000;
		font-size: 32rpx;
	}

	.realname-slogn {
		font-size: 24rpx;
		color: #a6a6a6;
		margin-top: 20rpx;
	}

	.License {
		width: 700rpx;
		height: 202rpx;
		margin-top: 20rpx;
		display: flex;
		border: 1px dashed #bfbfbf;
		border-radius: 10rpx;
	}

	.License-tit,
	.License-img {
		width: 50vw;
		height: 100%;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;

		.add {
			width: 58rpx;
			height: 58rpx;
			margin: auto;
		}
	}

	.License-img {
		background-image: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/License.png);
		background-size: 100%;

		image {
			width: 258rpx;
			height: 100%;
		}

		width: 258rpx;
		height: 166rpx;
		margin: auto;
	}

	.idcard-front {
		background-image: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/idcard-front.png);
	}

	.idcard-back {
		background-image: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/idcard-back.png);
	}

	.tit-city {
		font-size: 30rpx;
		color: #000;
		margin-left: 160rpx;
	}
	.agreement {
		// display: flex;
		margin-top: 30rpx;
		text-align: center;
		font-size: 22rpx;
		justify-content: center;
	}
	.agreement-bule {
		color: #7948ea;
	}

	.application-btn {
		image {
			width: 632rpx;
			height: 92rpx;
		}
	}
	.verify-tit {
		// font-size: 44rpx;
		font-weight: 400;
		color: #000;
		margin: 30rpx auto;
		text-align: center;
	}
	.verify-time {
		font-size: 20rpx;
		color: #a6a6a6;
		justify-content: center;
		display: flex;
	}
	.title-away {
		padding-top: 40rpx;
		.get-away {
			display: inline-block;
			height: 53rpx;
			border-radius: 14rpx;
			border: 3rpx solid rgba(188, 164, 237, 0.31);
			padding: 0 10rpx;
			box-sizeing: border-box;
			font-size: 24rpx;
			color: rgba(121, 72, 234, 1);
		}
	}
	.settleinpopup-content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 692rpx;
		height: 1292rpx;
		margin: 0 auto;
		background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/merchant-bg.png)
			no-repeat;
		background-size: 100% 100%;
		.settle-close {
			position: absolute;
			top: 58rpx;
			right: 26rpx;
			width: 45rpx;
			height: 45rpx;
			background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/merchant-close.png)
				no-repeat;
			background-size: 100% 100%;
		}
		.settle-title {
			margin-top: 58rpx;
			margin-bottom: 23rpx;
			font-weight: 36rpx;
		}
		.settle-button {
			position: absolute;
			bottom: 23rpx;
			width: 632rpx;
			height: 92rpx;
			background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/read-all.png)
				no-repeat;
			background-size: 100% 100%;
		}
		.allready {
			background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/already-read.png)
				no-repeat !important;
			background-size: 100% 100% !important;
		}
	}
	::v-deep .input-value-border {
		border: none !important;
	}
</style>
